<template>
    <div   class="food_list" v-if="index === 0"  >
               
        <van-tree-select    height="88vw" :items="items"       v-model:main-active-index =" active"  @click-nav="navClick">
            <template #content>
                 <div v-for="(item,index)  in subItem"  class="item_bg">
                      
                       <FoodAdd   :item = 'item'    :showAdd="true"       :addClickEvt="addClick"   @stepperEvt = 'mystepperEvt'   />

                 </div>
                
            </template>
        </van-tree-select>


    </div>

    <div   v-else>{{ foodData.content }}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import FoodAdd from '../../../components/FoodAdd.vue'
    export default {

            components:{
                FoodAdd,
            },
        props:['index','foodData'],

        setup(props) {
            
         //   console.log(props.foodData)

           let  data = reactive({
            active:0,
            items:[],
            subItem:[]
           })

            
           // 1、数据的初始化
           const init = ()=>{
         
              let newList  = []
              newList =  props.foodData?.items?.map((item,index)=>{
                
                  newList.push({text:item.text  } )
                   
                   if( data.active === index  ){

                      data.subItem = item.children

                  }  
                  

                return item

            })
                 
        

            data.items =  newList
           }

           init()

           // 2、点击左侧导航，右侧显示相应内容

          const  navClick = (index)=>{
                //  这个方法，会自动传入点击选项的下标
              
               data.active =   index
               init()
             
           }   

           // 3、切换步进器
           const addClick = (id)=>{
                   
               data.subItem.forEach((item)=>{
                               
                    if(item.id === id) {
                        item.add =  false

                    item.num += 1; 
                    }


               })

           }


           // 4、步进器的name获取--这个name就是那个商品
         const   mystepperEvt = function(value,detail){
                   console.log(arguments)
                 data.subItem.forEach((item)=>{
                
                    if(item.id === detail.name){
                      
                          item.num = value
                    }
                
                 }) 
         }

       
           return  {
               ...toRefs(data),
               navClick ,
               addClick,
               mystepperEvt
           }
        
        }

    }
</script>

<style lang="less" scoped>
    .food_list{
        margin-top:20px ;
         .item_bg{
            padding: 10px;
         }
    }
    

    /deep/ .van-sidebar-item--select:before{
        background-color: #ffc400;
    }

    
/deep/ .van-tree-select__item--active {
  color: #ffc400;
}
    


</style>